<template>
  <n-layout class="home-wrapper" :native-scrollbar="false">
		<n-layout-header>
			<section class="logo"></section>
			<wy-menu class="wy-menu" />
			<wy-theme class="wy-theme" />
			<wy-center class="wy-center" />
		</n-layout-header>
		<n-layout-content>
			<wy-breadcrumb />
			<Suspense>
				<template #default>
					<router-view class="home-content" />
				</template>
			</Suspense>
		</n-layout-content>
	</n-layout>
</template>

<script setup>
import WyMenu from '@@/home/menu'
import WyTheme from '@@/home/theme'
import WyCenter from '@@/home/center'
import WyBreadcrumb from '@@/breadcrumb'
</script>

<style scoped lang="scss">
$header_height: 100px;
.home-wrapper {
  height: 100vh;
	width: 1400px;
	margin: 0 auto;
	::v-deep(.n-scrollbar-content) {
		height: 100%;
		display: flex;
		flex-direction: column;
		.n-layout-header {
			height: $header_height;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.logo {
				width: 300px;
				height: 100px;
				background-image: url('/static/images/logo.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.wy-menu {
				flex: 1;
			}
			.wy-theme {
				width: 100px;
			}
			.wy-center {
				width: 60px;
			}
		}
		.n-layout-content {
			flex: 1;
			background-color: transparent;
			padding: 20px 0;
		}
	}
	.home-content {
		margin-top: 20px;
	}
}
</style>